<div class="layers-wrapper">
    <div *ngIf="layersData" class="content">
        <ng-container *ngFor="let i of layersData">
            <div>
                <label nz-checkbox [(ngModel)]="i.check"
                       (ngModelChange)="layerCheckChange($event,'parent',i.key)"></label>
                <div class="layer-title" [title]="i.title">{{i.title}}</div>
                <i nz-icon
                   [nzType]="i.visible?'up':'down'"
                   nzTheme="outline"
                   (click)="i.visible=!i.visible"></i>
            </div>
            <div class="child-layers" [ngStyle]="{'display':i.visible?'block':'none'}">
                <ul dndDropzone [dndHorizontal]="false" (dndDrop)="onDrop($event, i.child)"
                    class="dndList">
                    <li dndPlaceholderRef class="dndPlaceholder"></li>
                    <li *ngFor="let child of i.child;let index=index" [dndDraggable]="child"
                        dndEffectAllowed="move"
                        (dndStart)="onDragStart($event)"
                        (dndMoved)="onDragged(child, i.child, 'move')"
                        (dndEnd)="onDragEnd($event,i.child)">
                        <div>
                            <label nz-checkbox [(ngModel)]="child.check"
                                   (ngModelChange)="layerCheckChange($event,'child',child.key)"></label>
                            <div class="layer-title"
                                 [title]="child.title">
                                <div class="layer-title-content" (click)="layerTitleClick(child.key,child.title)"
                                     [ngClass]="child.select?'layer-title-select':''">{{child.title}}</div>
                            </div>
                            <a title="下载图层" [href]="child.downloadUrl" [download]="child.downloadUrl">
                                <i
                                    nz-icon
                                    nzType="download"
                                    nzTheme="outline"></i>
                            </a>

                            <i title="图层上移" *ngIf="index!==0" nz-icon nzType="caret-up" nzTheme="outline"
                               class="order-icon"
                               (click)="changeListOrder(i.key,child.key,'up')"></i>
                            <i title="图层下移" *ngIf="index!==i.child.length-1" nz-icon nzType="caret-down"
                               nzTheme="outline"
                               class="order-icon"
                               (click)="changeListOrder(i.key,child.key,'down')"></i>
                        </div>
                        <div class="img-wrapper"><img [src]="child.icon" alt="地图样式"
                                                      (click)="layerIconClick(child.key,child.title)"></div>
                    </li>
                </ul>
            </div>
        </ng-container>
    </div>
    <div *ngIf="!layersData" class="empty">
        您还没有上传数据哦
    </div>
</div>
